<template>
    <div>
        <div class="block">
          <span  style="margin: 0px 40px">SpringBoot课程</span>
        </div>
      <div class="block">
            <div  v-for=" item in essenceData" :key="item.id" @click="essay(item.id)">
              <el-timeline >
                <el-timeline-item  timestamp="第一节：整合Mybatis" placement="top">
                  <el-card>
                    <div style="display: flex;justify-content: space-between">
                      <div>
                        <h4>{{item.title}}</h4>
                        <p>{{item.description}}</p>
                        <icon class="el-icon-view"/><span>{{item.watch}}</span>
                        <icon style="margin-left: 10px" class="el-icon-chat-dot-square"/><span>{{item.discuss}}</span>
                        <icon style="margin-left: 10px" class="el-icon-star-on"/><span>{{item.likes}}</span>
                      </div>
                      <div>
                        <img style="width: 200px;height: 120px" :src="item.coverUrl"/>
                      </div>
                    </div>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
        <div>
          <el-pagination
            background
            layout="prev, pager, next"
            page-sizes="5"
            @current-change="handleCurrentChange"
            :page-size="5"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
</template>

<script>
  import {essence, pageSelect} from '../api/axiosRequest'
    export default {
        name: "",
        data(){
          return{
            activeNames: ['1'],
            blogs:[],
            essenceData:[],
            current:1,
            total:0,
            options: [
              {value: 'zhinan',
              label: '指南',
              },
              {value: 'zhinan',
                label: '指南',
              },
              {value: 'zhinan',
                label: '指南',
              },
            ],
          }
        },
      created() {
          this.essenceAll()
      },
      methods:{
        essenceAll(){
          essence("/blog/essence").then(res=>{
            this.essenceData = res.data.data;
            console.log(this.essenceData)
          })
        },
        essay(index){
          const _this = this;
          _this.$router.push(`/Details/${index}`)
        },
        handleCurrentChange(val) {
          this.current=val;
          pageSelect(this.current).then(res=>{
            console.log(res)
            this.total = res.data.data.total;
            this.home = res.data.data.blogList;
          })
          console.log(`当前页: ${val}`);
        },
      }
    }
</script>

<style scoped>
  .block{
    margin-top: 20px;
    margin-right: 25px;
    background: #24292e;
  }
</style>
